import React, { Component } from 'react';

class Cpn extends Component {
  render() {
    return <h2>Cpn</h2>
  }

  componentWillUnmount() {
    console.log('Cpn: componentWillUnmount')
  }
}

export default class App extends Component {
  constructor(props) {
    super()

    this.state = {
      counter: 0,
      isShow: true
    }

    console.log('constructor')
  }

  render() {
    console.log('render')

    return (
      <div>
        App Component
        <h2>Current count： {this.state.counter}</h2>
        <button onClick={ e =>this.increment() }>+1</button>
        <button onClick={ e => this.decrement() }>-1</button>
        <hr/>
        <button onClick={ e => this.switch() }>switch</button>
        { this.state.isShow && <Cpn/> }
      </div>
    )
  }

  increment() {
    this.setState({
      counter: this.state.counter +1
    })
  }

  decrement() {
    this.setState({
      counter: this.state.counter -1
    })
  }

  switch() {
    this.setState({
      isShow: !this.state.isShow
    })
  }

  componentDidMount() {
    console.log('componentDidMount')
  }

  componentDidUpdate(prevProps, prvState, snapshot) {
    console.log('componentDidUpdate')
  }
}